﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--移动端开发必加的标签viewport-->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>新闻列表</title>
    <style type="text/css">
        body, div, ul, li, img, h2, p {
            margin: 0;
            padding: 0;
            font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, sans-serif;
            font-size: 14px;
        }

        ul, li {
            list-style: none;
        }

        img {
            display: block;
            border: none;
        }

        #ul1 {
            padding: 10px;
        }

        #ul1 li {
            position: relative;
            padding: 10px 0;
            height: 60px;
            border-bottom: 1px dashed #008000;
        }

        #ul1 li .left {
            position: absolute;
            top: 10px;
            left: 0;

            width: 75px;
            height: 60px;

            background: url("img/default.jpg") no-repeat center center;
            background-size: 100% 100%;
        }

        #ul1 li .left img {
            width: 100%;
            height: 100%;

            opacity: 0;
            filter: alpha(opacity=0);
        }

        #ul1 li .right {
            margin-left: 80px;
        }

        #ul1 li .right h2 {
            line-height: 20px;

            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        #ul1 li .right p {
            font-size: 12px;
            color: #999;
            line-height: 20px;
        }
    </style>
</head>
<body>
<ul id="ul1">
   
</ul>

<script charset="utf-8" type="text/javascript" src="json/json.js"></script>
<script charset="utf-8" type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript">
    var oUl = document.getElementById("ul1");
    var imgList = oUl.getElementsByTagName("img");

    //->1、数据绑定:把json.js-dataAry中的数据绑定在页面上
    function bindData() {
        var str = "";
        for (var i = 0; i < dataAry.length; i++) {
            var cur = dataAry[i];

            str += "<li>";
            str += "<div class='left'><img src='img/default.jpg' trueImg='" + cur.logo + "'/></div>";
            str += "<div class='right'><h2>" + cur.title + "</h2><p>" + cur.desc + "</p></div>";
            str += "</li>";
        }
        oUl.innerHTML = str;
    }
    bindData();

    //->2、图片延迟加载
    //->oImg.onload是异步编程的,第一次循环curImg存储的是第一张图片,
    // 我们加载的也是第一张图片的真实地址,但是在onload加载的时候需要时间,
    // 在这段时间内,我们不等,继续执行后面的循环,只有当循环都结束后
    // (curImg存储的是最后一个图片),才会返回头看有没有加载成功....->
    // 我们只能把最后一张加载
    function init() {
        for (var i = 0; i < imgList.length; i++) {
            ~function (i) {
                var curImg = imgList[i];
                if (curImg.isLoad) return;

                var curImgTop = utils.offset(curImg).top + curImg.offsetHeight,
                        navigatorTop = utils.win("clientHeight") + utils.win("scrollTop");
                if (curImgTop <= navigatorTop) {
                    var oImg = new Image;
                    oImg.src = curImg.getAttribute("trueImg");
                    oImg.onload = function () {
                        curImg.src = this.src;
                        curImg.isLoad = true;

                        fadeIn(curImg);
                    }
                }
            }(i);
        }
    }

    //->3、实现渐现fadeIn
    function fadeIn(curImg) {
        var count = 0;
        var timer = window.setInterval(function () {
            if (count >= 1) {
                curImg.style.opacity = 1;
                curImg.style.filter = "alpha(opacity=100)";
                window.clearInterval(timer);
                return;
            }
            count += 0.02;
            curImg.style.opacity = count;
            curImg.style.filter = "alpha(opacity=" + count * 100 + ")";
        }, 10);
    }

    window.setTimeout(init, 1000);
    window.onscroll = init;
</script>
</body>
</html>